<template>
    <el-table :data="articles" height="600" style="width: 100%" border v-loading="loading">
        <el-table-column 
            fixed="left"
            prop="id"
            label="ID"
            width="80px">
        </el-table-column>
        <el-table-column 
            prop="title"
            label="标题"
            width="300px">
        </el-table-column>
        <el-table-column 
            prop="summary"
            label="简介"
            width="300px">
        </el-table-column>
        <el-table-column 
            prop="image"
            label="缩略图"
            width="150px">
            <template #default="scope">
                <img :src="scope.row.image" style="object-fix: contain; height: 100px">
            </template>
        </el-table-column>
        <el-table-column 
            prop="source"
            label="来源"
            width="150px">
        </el-table-column>
        <el-table-column 
            prop="addtime"
            label="添加时间"
            width="150px">
        </el-table-column>
        <el-table-column 
            prop="updatatime"
            label="更新时间"
            width="150px">
        </el-table-column>
        <el-table-column 
            prop="keywords"
            label="关键词"
            width="150px">
        </el-table-column>
        <el-table-column 
            fixed="right"
            label="操作"
            width="150px">
            <template #default="scope">
                <el-button type="text" size="small" @click="handleEdit(scope)">修改</el-button>
                <el-button type="text" size="small" @click="handleDel(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="count">
    </el-pagination>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { adminArticle } from '@/api/content.js'
export default {
    name: "ArticleTable",
    data(){
        return {
            currentPage: 1
        }
    },
    methods: {
        ...mapMutations('aa', [
            'getArticles',
            'spliceArticle',
            'setLoading',
            'setEditArticle'
        ]),
        async handleEdit(scope){
            await this.setEditArticle(scope)
        },
        async handleDel(scope){
            this.setLoading(true)
            let data = await adminArticle.del(scope.row.id)
            this.setLoading(false)
            console.log('data', data)
            this.spliceArticle(scope.index_)
        },
        handleSizeChange(psize){
            console.log('psize', psize)
        },
        handleCurrentChange(page){
            this.getArticles(page)
        }

    },
    computed: {
        ...mapState('aa', [
            'articles',
            'loading',
            'count'
        ])
    },
    mounted(){
        this.getArticles(1);
    }
}
</script>

<style lang="scss" scoped>
.el-table {
    /deep/ .el-table__body-wrapper {
        overflow: auto !important;
    }
}
</style>